<template>
  <div>
    <el-form :inline="true" style="overflow: auto">
      <el-form-item>
        <el-select
          style="width: 180px"
          placeholder="请选择项目名称"
          v-model="projectId"
          @change="tabSelect(projectId)"
        >
          <el-option
            :label="item.title"
            v-for="(item, index) in projectDataArr"
            :key="index"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          style="width: 180px"
          placeholder="请选择类别"
          v-model="categoryName"
          @change="tabSelect(categoryName)"
        >
          <el-option
            :label="item"
            v-for="(item, index) in categoryNameData"
            :key="index"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          style="width: 180px"
          placeholder="请选择子任务名称"
          v-model="subtaskSelect"
          @change="tabSelect()"
        >
          <el-option
            :label="item"
            v-for="(item, index) in subtask"
            :key="index"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.native="BulkEditing(0)"
          >批量修改</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      height="500"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
      stripe
      infinite-scroll-delay="1000"
      border
      style="width: 100%"
      :data="tableData.slice((current - 1) * size, current * size)"
      @row-click="handleRowClick"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- prop="date" -->
      <el-table-column label="项目名称" prop="title"> </el-table-column>
      <el-table-column label="类别" prop="category"> </el-table-column>
      <el-table-column label="子任务" prop="taskName"> </el-table-column>
      <el-table-column label="开始时间" sortable prop="startTime">
      </el-table-column>
      <el-table-column label="结束时间" sortable prop="endTime">
      </el-table-column>
      <el-table-column label="用户名" prop="nickName"> </el-table-column>
      <el-table-column label="用户工号" prop="userName"> </el-table-column>
      <el-table-column label="子任务分数" width="100" fixed="right">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.score"
            @input="(item) => (scope.row.score = item.replace(/[^\d.]/g, ''))"
            @change="updateValue(scope.$index, scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="子任务最高分" width="120" fixed="right">
        <template slot-scope="scope">
          <el-tag type="info">最高分：{{ scope.row.highScore }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" @click="updateNewScore(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20]"
      :current-page.sync="current"
      :page-size="size"
      layout="sizes, prev, pager, slot"
      :total="tableData.length"
      row-key
    >
            <el-button type="text" @click="showMore">下一页</el-button>    
    </el-pagination>

    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-table
        :data="
          showData == 0 ? tableData.slice((current - 1) * 5, current * 5) : row
        "
        style="width: 100%"
      >
        <el-table-column prop="title" label="项目名称" width="180">
        </el-table-column>
        <el-table-column prop="category" label="类别" width="180">
        </el-table-column>
        <el-table-column prop="taskName" label="子任务" width="180">
        </el-table-column>
        <el-table-column prop="nickName" label="用户名"> </el-table-column>
        <el-table-column label="子任务分数" fixed="right">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.score"
              @input="(item) => (scope.row.score = item.replace(/[^\d]/g, ''))"
              @change="updateValue(scope.$index, scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="子任务最高分" width="120">
          <template slot-scope="scope">
            <el-tag type="info">最高分：{{ scope.row.highScore }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modify(tableData, row)"
          >确 定</el-button
        >
      </span>

       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5]"
        :current-page.sync="current"
        :page-size="5"
        layout="sizes, prev, pager, slot"
        :total="tableData.length"
        row-key
        v-show="showData == 0"
      >
              <el-button type="text" @click="showMore">下一页</el-button>    
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "subexamineupdate",
  data() {
    return {
      projectName: "",
      subtaskSelect: "",
      categoryName: "",
      arr: [],
      // newArr: [],
      categoryData: [],
      projectId: "",
      size: 5,
      current: 1,
      score: "",
      dialogVisible: false,
      newScore: [],
      listScore: "",
      row: [],
      obj: {
        projectId: "",
        taskId: "",
        userId: "",
        score: "",
      },
      showData: 0,
      multipleSelection: [],
      projectDataArr: [],
      categoryNameData: [],
      taskId: "",
      subtask: [],
      tableData: [],
      newArr:[]
    };
  },
  created() {
    this.AllData();
    this.getProjectName();
  },
  methods: {
    handleRowClick() {},
    updateNewScore(item) {
      // let oldScore;
      // for (var i = 0; i < this.newArr.length; i++) {
      //   if (this.newArr[i].id == item.id) {
      //     console.log(this.newArr[i].id);
      //     console.log(item.id);
      //     console.log(this.newArr[i]);
      //     oldScore = this.newArr[i].score;
      //   }
      // }
      this.newScore = [
        {
          projectId: item.projectId,
          taskId: item.taskId,
          userId: item.userId,
          score: item.score,
        },
      ];
      // console.log(oldScore);
      // console.log(item.score);
      // if(oldScore == item.score){
      //   this.$message({
      //   message: "您没有修改分数",
      //   type: "warning",
      // });
      // }else{
        this.$put("/api/project/subTaskScore", this.newScore);
        this.$message({
          message: "分数修改成功",
          type: "success",
        });
      // }
    },
    // 复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getProjectName() {
      this.$get("/api/projects").then((res) => {
        this.projectDataArr = res.data;
      });
    },
    updateValue(index, row) {
      console.log(row);
      // 假设我们想要更新名字为 "新的名字"
      if (row.score > row.highScore) {
        this.$set(this.tableData[index], "score", row.highScore);
      }
    },
    modify(item, row) {
      this.newScore = [];
      if (row.length != 1) {
        for (var i = 0; i < row.length; i++) {
          this.obj = {
            projectId: "",
            taskId: "",
            userId: "",
            score: "",
          };
          this.obj.projectId = row[i].projectId;
          this.obj.taskId = row[i].taskId;
          this.obj.userId = row[i].userId;
          this.obj.score = row[i].score;
          this.newScore.push(this.obj);
        }
      }

      this.$put("/api/project/subTaskScore", this.newScore);
      this.$message({
        message: "分数修改成功",
        type: "success",
      });
      this.dialogVisible = false;
    },
    BulkEditing(item) {
      this.row = [];
      this.showData = 1;
      if (item == 0) {
        if (this.multipleSelection != "") {
          this.row = this.multipleSelection;
          this.dialogVisible = true;
        } else {
          this.$message({
            message: "您还未选择项目，请先勾选项目！！！",
            type: "warning",
          });
        }
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSizeChange(val) {
      this.size = val;
    },
    handleCurrentChange(val) {
      this.current = val;
    },
    showMore() {
      if (this.current < this.tableData.length / this.size) {
        this.current++;
      } else {
        this.$message({
          message: "已经是最后一页",
          type: "warning",
        });
      }
    },
    async AllData() {
      console.log(this.subtaskSelect);
      await this.$get("/api/project/subTaskScores", {
        projectId: this.projectId || "",
        taskCategory: this.categoryName || "",
        taskName: this.subtaskSelect || "",
      }).then((res) => {
        this.tableData = res.data.list;
        this.newArr = res.data.list;
      });
    },
    async tabSelect(item) {
      console.log(this.subtaskSelect);
      if (item == this.projectId) {
        this.categoryName = "";
        this.subtaskSelect = "";
        await this.$get("/api/project/projectCategory/" + this.projectId).then(
          (res) => {
            this.categoryNameData = res.data.data;
          }
        );
      } else if (item == this.categoryName) {
        await this.$get("/api/project/subTaskName", {
          pId: this.projectId,
          category: this.categoryName,
        }).then((res) => {
          this.subtask = res.data;
        });
        this.subtaskSelect = "";
      }
      this.AllData();
    },
  },
  computed: {
    ProjectNameData() {
      return this.projectDataArr;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table >>> td > .cell {
  text-align: center;
}
</style>